<template>
  <div class="gateway-test-container">
    <h1>二维码网关测试页面</h1>

    <div class="test-form">
      <h2>测试参数</h2>
      <div class="form-item">
        <label>二维码ID:</label>
        <a-input v-model:value="testId" placeholder="输入二维码ID" />
      </div>
      <div class="form-item">
        <label>签名:</label>
        <a-input v-model:value="testSign" placeholder="输入签名" />
      </div>
      <div class="form-actions">
        <a-button type="primary" @click="testScanJson">测试 scan-json 接口</a-button>
        <a-button @click="testGateway">测试网关页面</a-button>
        <a-button @click="generateTestData">生成测试数据</a-button>
      </div>
    </div>

    <div class="test-results" v-if="testResult">
      <h2>测试结果</h2>
      <pre>{{ testResult }}</pre>
    </div>

    <div class="test-links">
      <h2>快速测试链接</h2>
      <p>使用以下测试数据：</p>
      <ul>
        <li>网址类型: <a :href="getGatewayUrl('test-url-id', 'test-sign')" target="_blank">网关预览</a></li>
        <li>图片类型: <a :href="getGatewayUrl('test-image-id', 'test-sign')" target="_blank">网关预览</a></li>
        <li>文本类型: <a :href="getGatewayUrl('test-text-id', 'test-sign')" target="_blank">网关预览</a></li>
        <li>小程序类型: <a :href="getGatewayUrl('test-mini-id', 'test-sign')" target="_blank">网关预览</a></li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import anyRequest from '@/network/anyRequest'

const testId = ref('test-url-id')
const testSign = ref('test-sign')
const testResult = ref('')

async function testScanJson() {
  try {
    const response = await anyRequest.get('/api/anon/qrcode/scan-json', {
      params: {
        id: testId.value,
        sign: testSign.value,
        gateway: true
      }
    })

    testResult.value = JSON.stringify(response.data, null, 2)
    message.success('API调用成功')
  } catch (error: any) {
    testResult.value = JSON.stringify(error.response?.data || error.message, null, 2)
    message.error('API调用失败')
  }
}

function testGateway() {
  const url = getGatewayUrl(testId.value, testSign.value)
  window.open(url, '_blank')
}

function getGatewayUrl(id: string, sign: string) {
  return `/qrcode/gateway?id=${encodeURIComponent(id)}&sign=${encodeURIComponent(sign)}`
}

function generateTestData() {
  // 这里可以调用实际的API来生成测试数据
  const testCases = [
    { id: 'test-url-id', type: 'URL', content: '{"url": "https://www.example.com"}' },
    { id: 'test-image-id', type: 'Image', content: '{"url": "https://via.placeholder.com/400x300.png?text=Test+Image"}' },
    { id: 'test-text-id', type: 'Text', content: '{"text": "这是一个测试文本内容\\n包含多行文本\\n用于验证文本显示功能"}' },
    { id: 'test-mini-id', type: 'MiniProgram', content: '{"miniAppName": "测试小程序", "miniAppCodeImg": "https://via.placeholder.com/200x200.png?text=Mini+Program"}' }
  ]

  testResult.value = JSON.stringify(testCases, null, 2)
  message.info('已生成测试数据，请使用上述ID进行测试')
}
</script>

<style scoped>
.gateway-test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-form {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 16px;
}

.form-item label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

.form-actions {
  margin-top: 20px;
}

.form-actions .ant-btn {
  margin-right: 12px;
}

.test-results {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-results pre {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.4;
}

.test-links {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-links ul {
  list-style-type: disc;
  padding-left: 20px;
}

.test-links li {
  margin-bottom: 8px;
}

.test-links a {
  color: #1890ff;
  text-decoration: none;
}

.test-links a:hover {
  text-decoration: underline;
}
</style>